import React, {PureComponent} from 'react';
import {Checkbox, Form, Input, Modal, Select, Steps, TreeSelect,} from 'antd';
import DescriptionList from '@/components/DescriptionList';


const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Step} = Steps;
const {TextArea} = Input;
const {Option} = Select;


const SHOW_PARENT = TreeSelect.SHOW_PARENT;

/**
 * 共享文件选择共享给组织，自定义组
 */
@Form.create()
class ShareToForm extends PureComponent {
  state = {
    orgIds: [],
    groupIds: [],
    shareToAll: false,
  };
  /*  formLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 18},
    };*/
  onOrgChange = value => {
    console.log(8888, value)
    this.setState({orgIds: value});
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 18},
    };
  }
   dealTreeData = (treeData) => {
    treeData.forEach((item) => {
      if (item.children) {
        this.dealTreeData(item.children);
      }
      item.value = item.id;
      item.key = item.id;
      item.title = item.orgName;

    })
  };


  render() {
    const {modalVisible, form, handleShare, handleModalVisible, orgTree, groupList, records} = this.props;
    const {groupIds, orgIds, shareToAll,} = this.state;
    const groupChildren = [];
    groupList.forEach(item => {
      groupChildren.push(<Option key={item.id}>{item.groupName}</Option>);
    });


    if (orgTree) {
      orgTree.forEach((item) => {
        if (item.children) {
          this.dealTreeData(item.children);
        }
        item.value = item.id;
        item.key = item.id;
        item.title = item.orgName;

      })
    }


    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        form.resetFields();
        handleShare(records, orgIds, groupIds, shareToAll);
      });
    };

    const orgProps = {
      value: this.state.orgIds,
      onChange: this.onOrgChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      searchPlaceholder: '请选择',

    };
    const onGroupChange = selectedItems => {
      this.setState({groupIds: selectedItems});
    };
    const onCheckBoxChange = e => {
      if (e.target.checked) {
        this.setState({shareToAll: true});
      } else {
        this.setState({shareToAll: false});
      }
    };

    return (
      <Modal
        width={640}
        bodyStyle={{padding: '32px 40px 48px'}}
        destroyOnClose
        title="选择共享对象"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
        afterClose={() => handleModalVisible()}
      >
        <Form>
          <FormItem label="所有人" {...this.formLayout}>
            <Checkbox onChange={onCheckBoxChange}>共享给所有人</Checkbox>
          </FormItem>

          {shareToAll ? null : <FormItem label="选择组织" {...this.formLayout}>
            <TreeSelect
              {...orgProps}
              treeData={orgTree}
              treeDefaultExpandAll
              dropdownStyle={{maxHeight: '220px'}}
            />
          </FormItem>}

          {shareToAll ? null : <FormItem label="选择自定义组" {...this.formLayout}>
            <Select
              mode="multiple"
              style={{width: '100%'}}
              placeholder="选择自定义组"
              defaultValue={groupIds}
              onChange={onGroupChange}
            >
              {groupChildren}
            </Select>

          </FormItem>}


        </Form>

      </Modal>
    );
  }
}

export default ShareToForm;
